<template>
  <!--授权确认弹窗-->
  <van-action-sheet :show="show" :closeable="false">
    <div class="accredit-notarize" @click.stop>
      <div class="nav-bar-con">
        <p class="navbar-l" @click="handleCancelBtn">取消</p>
        <p class="navbar-c">协议</p>
        <p class="navbar-r" @click="handleConfirmBtn">确认</p>
      </div>
      <div class="text-con">
        <p class="mb30">请您认真阅读并同意以下协议内容：</p>
        <div class="accredit-notarize-col">
          <p @click="handlePrivacyPolicyBtn">《广州蓝鼎网络有限公司隐私政策》</p>
          <van-checkbox class="checkbox-btn" v-model="userInfo.privacyPolicyChecked" shape="square"></van-checkbox>
        </div>
        <div class="accredit-notarize-col">
          <p @click="handleActivityRulesBtn">《活动规则》</p>
          <van-checkbox class="checkbox-btn" v-model="userInfo.activityRulesChecked" shape="square"></van-checkbox>
        </div>
      </div>
    </div>
  </van-action-sheet>
  <MoadlPrivacyPolicy :show="privacyPolicyState" @handleCloseChange="handleCloseChange"></MoadlPrivacyPolicy>
  <MoadlActivityRules :show="activityRulesState" @handleARCloseChang="handleARCloseChang"></MoadlActivityRules>
</template>

<script setup>
import {defineProps, ref, watch} from "vue";
import useUser from "@/store/user.js";
import {showToast} from "vant";
import MoadlPrivacyPolicy from "./MoadlPrivacyPolicy.vue";
import MoadlActivityRules from "./MoadlActivityRules.vue";

const userInfo = useUser()
const privacyPolicyState = ref(false)
const activityRulesState = ref(false)
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['handleCancelChange', 'handleConfirmChange'])
//取消-回调
const handleCancelBtn = () => {
  userInfo.privacyPolicyChecked = false
  userInfo.activityRulesChecked = false
  emits("handleCancelChange")
}
//确认-回调
const handleConfirmBtn = () => {
  if (userInfo.privacyPolicyChecked && userInfo.activityRulesChecked) {
    userInfo.handleHaveRead()
    emits("handleConfirmChange")
  } else {
    showToast('请您勾选以下内容！');
  }
}
//隐私政策
const handlePrivacyPolicyBtn = () => {
  privacyPolicyState.value = true
}
const handleCloseChange = () => {
  privacyPolicyState.value = false
}
const handleActivityRulesBtn = () => {
  activityRulesState.value = true
}
const handleARCloseChang = () => {
  activityRulesState.value = false
}
</script>

<style lang="scss" scoped>
.accredit-notarize {
  width: 100%;
  min-height: 920px;
  padding: 54px 24px;
  box-sizing: border-box;

  .nav-bar-con {
    display: flex;
    align-content: center;
    justify-content: space-between;

    p {
      font-size: 36px;
      font-weight: 500;
      line-height: 1.5em;
    }

    .navbar-l {
      color: #000000;
    }

    .navbar-c {
      color: #666666;
    }

    .navbar-r {
      color: #2a70e9;
    }
  }

  .text-con {
    margin-top: 30px;

    p {
      text-align: left;
      font-size: 30px;
      color: #666666;
      line-height: 1.5em;
      font-weight: 500;
    }

    .accredit-notarize-col {
      width: 100%;
      height: 88px;
      border-top: 1px solid #e5e5e5;
      display: flex;
      align-items: center;
      justify-content: space-between;

      p {
        font-size: 28px;
        font-weight: 500;
        line-height: 1.5em;
        color: #2a70e9;
      }
    }

  }
}
</style>
